<!DOCTYPE html>
<html>
<head>
    <title>区域医疗大数据系统BI可视化后台</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <!-- jQuery AND jQueryUI -->
    <script type="text/javascript" src="js/libs/jquery/1.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

    <!-- Compressed Version
    <link type="text/css" rel="stylesheet" href="min/b=CoreAdmin&f=css/reset.css,css/style.css,css/jqueryui/jqueryui.css,js/jwysiwyg/jquery.wysiwyg.old-school.css,js/zoombox/zoombox.css" />
    <script type="text/javascript" src="min/b=CoreAdmin/js&f=cookie/jquery.cookie.js,jwysiwyg/jquery.wysiwyg.js,tooltipsy.min.js,iphone-style-checkboxes.js,excanvas.js,zoombox/zoombox.js,visualize.jQuery.js,jquery.uniform.min.js,main.js"></script>
    -->
    <link rel="stylesheet" href="css/min.css" />
    <script type="text/javascript" src="js/min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>

<script type="text/javascript" src="content/settings/main.js"></script>
<link rel="stylesheet" href="content/settings/style.css" />


<div class="settings" id="settings"></div>
<!--   HEAD -->
<div id="head">
    <div class="left">
        区域医疗大数据系统可视化管理界面
    </div>
    <div class="right">

    </div>
</div>


<!--
        SIDEBAR
                 -->
<div id="sidebar">
    <ul>
        <li>
            <a href="index">
                <img src="img/icons/menu/inbox.png" alt="" />
                BI仪表盘概览
            </a>
        </li>
        <li class="current"><a href="#"><img src="img/icons/menu/layout.png" alt="" /> 病例离线数据分析</a>
            <ul>
                <li class="current"><a href="dashboard.html?p=index">病例随机抽取</a></li>
                <li><a href="forms.html?p=forms">病例范围占比统计</a></li>
                <li><a href="table.html?p=table">Top10热门病种</a></li>
                <li><a href="tabs.html?p=tabs">名区域top3病种统计</a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/icons/menu/brush.png" alt="" /> 药物分析</a>
            <ul>
                <li><a href="#">Fake menu #1</a></li>
                <li><a href="#">Fake menu #2</a></li>
                <li><a href="#">Fake menu #3</a></li>
            </ul>
        </li>
        <li><a href="#"><img src="img/icons/menu/lab.png" alt="" /> 区域实时数据分析</a>
            <ul>
                <li><a href="#">病例实时流量分析</a></li>
                <li><a href="#">名省热门病例实时统计</a></li>
                <li><a href="#">最近一天病例实时流量统计</a>
                </li>
            </ul>
        </li>

    </ul>


</div>

<!--
      CONTENT
                -->
<div id="content" class="white">
    <h1><img src="img/icons/dashboard.png" alt="" /> 病例离线数据分析
    </h1>

    <div class="cb">
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 100%;height:800px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();  // 开启 loading 效果

            // [
            //     {
            //         "taskId":"1",
            //         "categoryId":2,
            //         "patientId":"3",
            //         "clickCount":100
            //     },
            //     {
            //         "taskId":"4",
            //         "categoryId":5,
            //         "patientId":"6",
            //         "clickCount":200
            //     },
            //     {
            //         "taskId":"7",
            //         "categoryId":8,
            //         "patientId":"9",
            //         "clickCount":300
            //     },
            //     {
            //         "taskId":"10",
            //         "categoryId":11,
            //         "patientId":"12",
            //         "clickCount":400
            //     },
            //     {
            //         "taskId":"13",
            //         "categoryId":14,
            //         "patientId":"15",
            //         "clickCount":500
            //     },
            //     {
            //         "taskId":"16",
            //         "categoryId":17,
            //         "patientId":"18",
            //         "clickCount":600
            //     },
            //     {
            //         "taskId":"19",
            //         "categoryId":20,
            //         "patientId":"21",
            //         "clickCount":700
            //     },
            //     {
            //         "taskId":"22",
            //         "categoryId":23,
            //         "patientId":"24",
            //         "clickCount":800
            //     },
            //     {
            //         "taskId":"3",
            //         "categoryId":14,
            //         "patientId":"7",
            //         "clickCount":900
            //     },
            //     {
            //         "taskId":"9",
            //         "categoryId":9,
            //         "patientId":"9",
            //         "clickCount":999
            //     }
            // ]

            $.get('http://localhost:8888/top10Patient', function (data) {

                var keys=[];
                for (var j=0;j<data.length;j++){
                    console.log(j);
                    for(var i in data[j]){
                        if ( i=="clickCount")
                            keys.push(i+String(j+1));//i就是它的键
                    }
                }

                var values=[];
                for(var j=0;j<data.length;j++){
                    for(var i in data[j]){
                        var dict={};
                        if ( i=="clickCount"){
                            dict["value"]=data[j][i];
                            dict["name"]=i+String(j+1);
                            values.push(dict);//i就是它的键
                        }
                    }
                }
                // alert(JSON.stringify(keys))//var keys_json=JSON.parse(keys);
                // alert(JSON.stringify(values))
                var values_json = JSON.parse(JSON.stringify(values));

                myChart.hideLoading();  // 隐藏 loading 效果
                myChart.setOption({
                    title: {
                        text: '漏斗图',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    legend: {
                        orient: 'vertical',
                        x:'left',      //可设定图例在左、右、居中
                        y:'bottom',     //可设定图例在上、下、居中
                        padding:[30,0,10,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data: keys
                    },

                    series: [
                        {
                            name:'漏斗图',
                            type:'funnel',
                            left: '10%',
                            top: 60,
                            //x2: 80,
                            bottom: 60,
                            width: '60%',
                            // height: {totalHeight} - y - y2,
                            min: 0,
                            max: 999,
                            minSize: '0%',
                            maxSize: '60%',
                            sort: 'ascending',
                            gap: 3,
                            label: {
                                show: true,
                                position: 'inside'
                            },
                            labelLine: {
                                length: 10,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            },
                            itemStyle: {
                                borderColor: '#fff',
                                borderWidth: 1
                            },
                            emphasis: {
                                label: {
                                    fontSize: 20
                                }
                            },
                            data: values_json
                        }
                    ]
                })
            }, 'json');

            // 使用刚指定的配置项和数据显示图表。
            //myChart.setOption(option);
        </script>

    </div>

</div>

<style>
    .copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>

</body>
</html>